<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<uni-nav-bar fixed statusBar :backgroundColor="`var(--bg-27)`" :border="false" @clickLeft="clickLeft">
				<text class="page-title">{{pageName}}</text>
				<view class="left-icon" slot="left"> </view>
			</uni-nav-bar>
		</match-media>
		<view class="content">
			<pc-nav-bar :pageName="pageName" class="page-name">
			</pc-nav-bar>
			<view class="wrap">
				<view class="headerContent">
					<view class="uploadBox">
						<view class="">
							{{ $t('Page.mineInfo.avatar') }}
						</view>
						<image class="avatar" :src="avatar? avatar : userInfo.avatar" @click="chooseImage"></image>
					</view>
				</view>
				<view class="container">
					<view class="item">
						<view class="itemLabel">ID</view>
						<view class="itemText"> {{ userInfo.id }} </view>
					</view>
					<view class="item">
						<view class="itemLabel">Invitation code</view>
						<view class="itemText"> {{ userInfo.invited }} </view>
					</view>
				</view>
				<view class="bottomContent">
					<waves class="btn saveBtn" @onTap="saveTap">SAVE</waves>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage,
		getTokenStorage
	} from '@/api/websocket.js'
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	import {
		baseURL
	} from '@/common/config.js'
	export default {
		components: {
			pcNavBar
		},
		data() {
			return {
				MAX_SIZEiZE,
				pageName: this.$t('Page.mineInfo.title'),
				avatar: ''
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				windowSize: state => state.app.windowSize,
				userInfo: state => state.app.userInfo,
			}),
			...mapGetters('app', ['isLogin']),
		},
		methods: {
			...mapMutations('app', ['saveUserInfo']),
			saveTap() {
				if (!this.avatar) return
				uni.uploadFile({
					url: baseURL + 'index/uploadavatar', //仅为示例，并非真实接口地址。
					filePath: this.avatar,
					name: 'image',
					header: {
						token: getTokenStorage()
					},
					formData: {
						id: this.userInfo.id
					},
					success: (res) => {
						let result = JSON.parse(res.data)
						uni.showToast({
							title: result.msg,
							icon: 'none'
						})
						if (result.code === 1) {
							let userInfo = JSON.parse(JSON.stringify(this.userInfo))
							if (result?.data?.avatar) {
								this.saveUserInfo({
									...userInfo,
									avatar: result.data.avatar
								})
							}
							return
						}
					},
					complete: () => {
						console.log("complete: ");
					}
				});
			},
			chooseImage() {
				let thit = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.avatar = res.tempFilePaths[0]
						console.log(JSON.stringify(res.tempFilePaths));
						// thit.uploadavatar({
						// 	id: thit.userInfo.id,
						// }, res.tempFilePaths[0])
						// const result = await uploadAvatar(params)
						// console.log("result: ", result);
					}
				})
			},
			clickLeft() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.btn {
		background: var(--bg-13);
		box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
		color: var(--color-28);
		border-radius: 100px;
		cursor: pointer;
	}

	// 默认样式 结构   
	@media screen and (min-width:768px) {
		.content {
			padding: 10px 30px 30px 30px !important;
		}
	}

	.page-wrap {
		min-height: 100vh;

		.page-title {
			width: 100%;
			margin: auto;
			height: 44px;
			line-height: 44px;
			font-size: 20px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}

		.left-icon {
			width: 22px;
			height: 22px;
			background: url('@/static/image/back-icon.png') no-repeat;
			background-size: contain;
		}

		.content {
			width: 100%;
			min-height: calc(100vh - 50px);
			padding: 0px 15px 65px;
			background: var(--bg-3);
			box-sizing: border-box;
			overflow: hidden;

			.wrap {
				max-width: 375px;

				.headerContent {
					margin-top: 20px;

					.uploadBox {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 13px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;

						.avatar {
							width: 70px;
							height: 70px;
							overflow: hidden;
							border-radius: 50%;
							cursor: pointer;
						}
					}
				}

				.container {
					margin-top: 30px;

					.item {
						margin-bottom: 30px;

						.itemLabel {
							font-size: 16px;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: var(--color-34);
							margin-bottom: 10px;
						}

						.itemText {
							font-size: 20px;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
						}
					}
				}

				.bottomContent {
					.saveBtn {
						width: 315px;
						margin: 0 auto;
						text-align: center;
						height: 45px;
						display: grid;
						place-items: center;
						font-size: 18px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
					}
				}
			}
		}
	}

	// PC
	@media screen and (min-width: 768px) {

		.page-wrap {
			padding-top: 70px;
			min-height: 100vh !important;
			overflow-y: auto;
			background: var(--bg-3);

			.content {
				width: 100%;
				min-height: calc(100vh - 70px) !important;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				background: var(--bg-3);
				padding: 0 30px 30px;
				box-sizing: border-box;
			}
		}
	}
</style>